<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tabs样式</title>
	<link rel="stylesheet" href="../lib/ocWindow/resources/css/debug.css" />
	<link rel="stylesheet" href="../lib/ocWindow/resources/css/style.css" />
	<link rel="stylesheet" href="css/tabs.css" />
	<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//设置一一对应的ID
			$(".oc-tabs >section").each(function(index){
				$(this).attr("id",index);
			});
			$(".oc-tabs >ul> li").each(function(index){
				$(this).attr("id",index);
			});
			//点击选项卡效果
			$(".oc-tabs >ul> li").click(function(){
				$(".oc-tabs >ul> li.active").removeClass("active");
				$(this).addClass("active");
				//alert($(this).attr("id"));
				var $idnum=$(this).attr("id");
				$(".oc-tabs >section").each(function(index){
					//alert($idnum);
					if($idnum==index){	
						$(".oc-tabs >section").removeClass("active1");
						//alert(index + "="+$idnum);
						$(this).addClass("active1");
					}
				});	
				
			});
			
		});
	</script>
</head>
<body style="background-color:#f0f0f0;">
	<div class="oc-tabs">
		<ul><!--标题-->
			<li class="active"><a>常规</a></li>
			<li><a>安全</a></li>
			<li><a>详细信息</a></li>
			<li><a>以前版本</a></li>
		</ul>
		<section class="active1" style="
			height:20rem;
		">tabs2内容区域<span>区域标题1</span></section>
		<section>tabs1内容区域<span>区域标题2</span></section>
		<section>tabs3内容区域<span>区域标题3</span></section>
		<section>tabs4内容区域<span>区域标题4</span></section>
	</div>
</body>
</html>